<template>
	<view class="user">
		<view class="header">
			<view class="pic">
				{{pic}}
			</view>
			<view class="text">
				<view class="name">
					{{ userInfo.name }}
				</view>
				<view class="role">
					{{ userInfo.role == 0 ? '管理员' : userInfo.role == 1 ? '老板' : userInfo.role == 2 ? '审批员' : '普通职员' }}
				</view>
			</view>
			
		</view>
		<view class="town">
			<view class="title">所属区域： </view>{{ townInfo.town_name }}
		</view>
		<view class="approver">
			<view class="title">所属审批组：</view> {{ approverInfo.name }}
		</view>
		<view class="attendance">
			<view class="title">所属考勤组：</view> {{ attendanceInfo.name }}
		</view>
		<view class="btn_edit">
			<button @click="editLogin">退出登入</button>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				userInfo:null,
				pic:null,
				attendanceInfo:null,
				townInfo:null,
				name:null,
				approverInfo:null
			};
		},
		onLoad() {
			this.init()
		},
		methods:{
			async init() {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				this.pic = this.userInfo.name.slice(this.userInfo.name.length - 2, this.userInfo.name.length)
				this.townInfo = JSON.parse(uni.getStorageSync('townInfo'))
				this.approverInfo = JSON.parse(uni.getStorageSync('approverInfo'))
				this.attendanceInfo = JSON.parse(uni.getStorageSync('attendanceInfo'))
			},
			editLogin(){
				uni.showModal({
					title:'提示',
					content:'确定退出登入？',
					success:function (res){
						if(res.confirm){
							uni.removeStorageSync('token')
							uni.removeStorageSync('attendanceInfo')
							uni.removeStorageSync('townInfo')
							uni.removeStorageSync('approverInfo')
							// 确定退出到登入页
							uni.navigateTo({
								url:'/pages/login/login'
							})							
						}else if(res.cancel){
							console.log('取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
.user{
	padding: 20rpx;
	position: relative;
	height: 100%;
	.header {
		display: flex;
	
		.pic {
			font-size: 30rpx;
			padding: 18rpx;
			background-color: blue;
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			color: #ffffff;
			border-radius: 54rpx;
		}
	
		.text {
			display: block;
			margin-left: 40rpx;
	
			.name {
				text-align: center;
			}
		}
		
	}
	.town,.approver,.attendance{
		width: 100%;
		margin-top: 100rpx;
		display: flex;
		font-size: 30rpx;
		margin-left: 40rpx;
		.title{
			width: 200rpx;
			text-align: center;
		}
		
	}
	::v-deep uni-button {
		background-color: orangered !important;
		color: #ffffff !important;
	}
	.btn_edit{
		position: fixed;
		width: 80%;
		left: 50%;
		transform: translateX(-50%);
		bottom:120rpx;
	}
}
</style>
